<template>
<div class = 'records'>
    <div class="base ">
        <div class="avatar">
            <img :src="base.avatar" :alt="base.patientName" width = '120px;' height= "150px;">
            <ul>
                <li>
                    <div class='name'>{{base.patientName}}</div>
                </li>
                <li>
                    <span class='gender'>{{base.sex ===1 ?'男':'女'}}</span>
                    <span class='age' v-if="base.age">{{base.age}}岁</span>
                </li>
                <li>
                    <span class='telephone'>{{base.phone}}</span>
                </li>
            </ul>
        </div>
        
        <div class="phone">
           <el-button type="primary" icon="el-icon-mobile-phone" @click = 'openIE'></el-button>
           <el-button type="primary" icon="el-icon-message"></el-button>
           <el-button type="primary" icon="el-icon-tickets"></el-button>
           <el-button type="primary" icon="el-icon-document"></el-button>
        </div>
        <ul class='baseDetail'>
            <li>姓 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<span>{{base.patientName}}</span></li>
            <li>性 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：<span>{{base.sex ===1 ?'男':'女'}}</span></li>
            <li>年 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：<span>{{base.age}}</span></li>
            <li>就诊卡号：<span>{{base.medicare}}</span></li>
            <li>身份证号：<span>{{base.idCard}}</span></li>
            <li>联系电话：<span>{{base.phone}}</span></li>
            <li>手术名称：<span>{{base.operationName}}</span></li>
            <li>主刀医师：<span>{{base.doctorName}}</span></li>
            <li>手术时间：<span>{{base.schedule}}</span></li>
        </ul>
    </div>
    <div class="allInfo" ref = 'allInfo'>
        <div class="renderWrap" v-if="template_form">
            <p>{{this.formName}}</p>
            <render :template_form = 'template_form' ref = 'renderForm' :border = false></render>
        </div>
        <div v-else><p>未设置随访表单</p></div>
       
        <div class="follower">
            <el-form ref="formLeftTop2" :model="formLeftTop2" :label-width="labelWidth" :inline = true>
                <el-form-item label="回访人">
                    <el-input type="input" v-model="formLeftTop2.execUserName" style = 'width: 196px;'></el-input>
                </el-form-item>
                <el-form-item label="实际回访时间">
                    <el-date-picker
                        v-model="formLeftTop2.execTime"
                        type="datetime"
                        placeholder="选择日期时间" style = 'width: 196px;'>
                        </el-date-picker>
                </el-form-item>
                <el-form-item label="实际回访方式">
                    <el-select v-model="formLeftTop2.followupType" placeholder="请选择" style = 'width: 196px;'>
                      <el-option label ='电话' value = '0'></el-option>
                      <el-option label ='短信' value = '1'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="随访状态">
                    <el-select v-model="formLeftTop2.followupResult" placeholder="请选择" style = 'width: 196px;'>
                      <el-option label ='正常状态' value = '0'></el-option>
                      <el-option label ='无法接通' value = '1'></el-option>
                      <el-option label ='号码错误' value = '2'></el-option>
                      <el-option label ='无人接听' value = '3'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否异常">
                    <el-select v-model="formLeftTop2.isUnusual" placeholder="请选择" style = 'width: 196px;'>
                      <el-option label ='正常' value = '0'></el-option>
                      <el-option label ='异常' value = '1'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否完成">
                    <el-select v-model="formLeftTop2.isFinish" placeholder="请选择" style = 'width: 196px;'>
                      <el-option label ='未完成' value = '0'></el-option>
                      <el-option label ='已完成' value = '1'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="处理意见" >
                    <el-input type="textarea" v-model="formLeftTop2.followupContent" ></el-input>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="success" @click="handleSubmit('formLeftTop2')">提交</el-button>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import formCreater from '@/yimiviews/case/formCreater'
import render from '@/formCreater/components/render'
import { getFollowupDetail, submitFollowup } from '@/api/followupManage'
export default {
  components: { formCreater, render },
  mounted() {
    const id = this.$route.params.id
    console.log(id)
    this.formLeftTop2.id = id
    getFollowupDetail({ id: id }).then(res => {
      console.log(res)
      this.base = res.data.followupDetail
      this.formLeftTop2.execUserName = this.base.patientName
      if (res.data.formData) {
        this.formId = res.data.formData[0].id
        this.formName = res.data.formData[0].name
        this.template_form = JSON.parse(res.data.formData[0].content)
      }
      console.log(this.template_form)
    })
  },
  data() {
    return {
      labelWidth: '120px',
      followTime: '',
      formLeftTop2: {
        id: 0,
        followupType: '0',
        followupResult: '0',
        isUnusual: '0',
        isFinish: '0',
        followupContent: ''
      },
      base: {
        avatar: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        name: '张三',
        gender: '男',
        age: '12',
        card: 'x12454xsdf',
        ID: '7898745698547896879',
        telephone: '17589898989',
        surgery: '手术1',
        operateDoctor: '张神医',
        surgeryTime: '2018-12-12'
      },
      formId: '',
      formName: '',
      template_form: ''
    }
  },
  methods: {
    openIE() {
      console.log('开始拨号。。。。' + this.base.phone)
      if (this.base.phone != null) {
        const url = location.origin + '/static/bb.html?phone=' + this.base.phone
        console.log('地址为：' + url)
        window.location.href = 'openIE:' + url
      }
    },
    handleSubmit(name) {
      const renderFormValid = this.$refs.renderForm.checkValid()
      this.$refs[name].validate((valid) => {
        if (valid && renderFormValid) {
          // window.localStorage.setItem('template_form', JSON.stringify(this.template_form))
          const query = Object.assign({}, this.formLeftTop2, { formId: this.formId, result: JSON.stringify(this.template_form) })
          submitFollowup(query).then(res => {
            this.$message({ message: '保存随访成功!', type: 'success' })
          })
        } else {
          this.$message.error('请填写必填项!')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.records{
    display: flex;
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
    .base{
        .avatar{
            position: relative;
            height:180px;
            padding: 15px 15px 15px 150px;
            img{
                position: absolute;
                left: 15px;
                top:15px;
            }
            ul,li{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            li{
                padding:10px 0;
                .name{
                    font-size: 20px;
                    font-weight: bold;
                }
                .gender{
                    margin-right: 10px;
                }
            }
        }
        width: 300px;
        height: 100%;
        border-right: 1px solid #ddd;
        .phone{
            padding:10px 0;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            text-align: center;
            .icon{
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                cursor: pointer;
            }
        }
        ul.baseDetail{
            margin: 0;
            padding: 0;
            li{
                list-style: none;
                padding: 15px 0 15px 15px;
                margin: 0;
                border-bottom: 1px solid #ddd;
                span{
                    margin-left: 20px;
                }
            }
        }
    }
    
    .allInfo{
        flex: 1;
        padding: 0 20px;
        box-sizing: border-box;
        .renderWrap{
            margin: 20px 0;
            border: 1px solid #ddd;
        }
        .tab{
            font-size: 20px;
            display: inline-block;
            height: 50px;
            line-height: 50px;
        }
        .follower{
            border: 1px solid #ddd;
            padding: 15px;
        }
    }
    
}
</style>
